<template>
	<view class="bg">
		<view class="words_area">
			<view class="words">
				<view class="words_content">
					{{words}}
				</view>
				<view class="words_from">
					<text v-if="fromWho">——</text>
					{{fromWho ? fromWho : ''}}
				</view>
			</view>
			<view class="copy" @click="copy">
				复制
			</view>
		</view>
		<view class="btn_view">
			<button @click="getWordsFunc">点击获取</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				words:'宇宙说：你所斗争的黑暗就在你心中，你所寻找的光明就在你心中。', // 一句话
				fromWho: '终末之诗', // 来自谁
				types: ['a','b','c','d','e','f','g'], // 这句话的类型数组
				type: 'a', // 这句话的类型
			}
		},
		onLoad() {
			// 加载分享菜单
			this.loadingShareMenu();
		},
		methods: {
			// 随机获取类型
			getType(){
				this.type = this.types[Math.floor(Math.random()*this.types.length)];
			},
			// 随机获取一句话
			getWords(){
				const _this = this;
				uni.request({
					url: `https://v1.hitokoto.cn/?c=${this.type}`,
					method: 'GET',
					success(res) {
						console.log(res);
						_this.words = res.data.hitokoto;
						_this.fromWho = res.data.from_who;
					},
					fail() {
						uni.showToast({
							icon: 'error',
							title: '请求失败，请稍后再试！',
							duration: 1000,
						})
					}
				})
			},
			// 点击按钮获取
			getWordsFunc(){
				// 随机获取类型
				this.getType();
				// 获取话
				this.getWords();
			},
			// 点击复制，复制文本
			copy(){
				const _this = this;
				uni.setClipboardData({
					data: _this.words,
					showToast: true,
					success(res) {
						console.log(res);
					}
				})
			},
			
			// 加载分享菜单
			loadingShareMenu() {
				wx.showShareMenu({
					withShareTicket: true,
					//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
					menus: ["shareAppMessage", "shareTimeline"]
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	@import url('../../static/css/basic.css');
	
	.words_area{
		width: 90%;
		padding-top: 100px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		.words{
			width: 80%;
			background-color: #5dd6be;
			border-radius: 5px;
			box-shadow: 4px 4px 8px #3d8c7c;
			padding: 5px;
			.words_content{
				letter-spacing: 2px;
				font-size: 18px;
				color: #b97bb9;
			}
			.words_from{
				margin-top: 10px;
				text-align: right;
				font-size: 16px;
				color: #e39771;
			}
		}
		.copy{
			width: 10%;
			color: #55aaff;
			font-size: 14px;
		}
	}
	.btn_view{
		margin-top: 50px;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		button{
			width: 100%;
			background-color: #b97bb9;
			color: #3973ad;
			font-size: 18px;
			font-weight: 600;
			letter-spacing: 2px;
			border-radius: 5px;
			box-shadow: 1px 1px 2px #916191;
		}
	}
</style>
